<template>
	<view class="uni-global-box">
		<view class="uni-global-title">
			新增管理员
		</view>
		<view class="body">
			<u-form :model="form" ref="form1" class="u-form" label-width="0" >
				<view class="u-form-textInput">
					<view class="u-form-name">
						<text class="u-form-required">*</text>
						用户昵称
					</view>
					<u-form-item prop="nickname" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.nickname" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						<text class="u-form-required">*</text>
						用户名
					</view>
					<u-form-item prop="username" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.username" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						<text class="u-form-required">*</text>
						密码
					</view>
					<u-form-item prop="password" :border-bottom="false" >
						<u-input class="u-form-input" v-model="form.password" type="password" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						手机号
					</view>
					<u-form-item prop="mobile" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.mobile" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						角色
					</view>
					<u-form-item prop="tags" :border-bottom="false">
						<u-checkbox-group  @change="changeRole" >
							<u-checkbox v-model="item.checked" v-for="(item, index) in roleArr" :key="index" :name="item._id">
								{{ item.role_name }}
							</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
				</view>
				
				<u-button @click="submit" type="primary" >提交</u-button>
			</u-form>

		</view>
	</view>
	<u-toast ref="uToast" ></u-toast>
</template>

<script>
	import { rules } from "/common/js_file/admin.js" ;
	const Admin = uniCloud.importObject("admin",{customUI:true});
	const global = uniCloud.importObject("global",{customUI:true});
	export default {
		data() {
			let form = {
				"username": "",
				"password": "",
				"nickname": "",
				"mobile": "",
				"role": null,
				"status": 1,
				"manage_area": null,
			}
			return {
				form,
				roleArr:[], // 角色
				rules: rules,
			}
		},
		onLoad() {
			this.getRoleData();
		},
		methods: {
			async submit() {
				this.$refs.form1.validate( async valid => {
					if (valid) {
						let verifyUniquenessUsername = await Admin.verifyUniquenessUsername(this.form.username)
						if(verifyUniquenessUsername.code == 200){
							if(verifyUniquenessUsername.result == 1){
								return this.$refs.uToast.show({title: '用户名重复',type: 'error',duration:2000,position:'center'})
							}
						}
						return this.add(this.form);
					} else {
						this.$refs.uToast.show({
							title: '校验失败',
							type: 'error',duration:500,position:'top',
						})
					}
				});
			},
			add(form){
				// return console.log(form) ;
				Admin.addAdmin(form).then(result => {
					if(result.code == 200){
						this.$refs.uToast.show({
							title: '添加成功',
							type: 'primary',
							duration:500,
							position:'top',
							url: '/pages/user/user-admin/user-admin'
						})
					}
				})
			},
			getRoleData(){
				let field = "role_id,role_name,comment";
				global.getList('roles',{},"_id asc",field).then(res => {
					let data = res.data;
					this.roleArr = data;
				})
			},
			// 角色选择
			changeRole(ev){
				this.form.role = ev;
			}
		},
		onReady() {
			this.$refs.form1.setRules(this.rules);
		}
	}
</script>

<style scoped lang="scss">
	.body {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
</style>